<template>
  <div class="bg-light">
    <div class="container-title">
      <span>商品物流</span>
    </div>
    <div class="pb">
      <Form v-model="form" :label-width="100">
        <FormItem label="运费" prop="fee">
          <Select v-model="freightTemplateId" style="width: 300px">
            <Option v-for="item in freightList" :key="item.id" :value="item.id">{{ item.name }}</Option>
          </Select>
          <Poptip word-wrap width="300" trigger="hover" content="若已设置并选择店铺级运费模板，则此处选择的运费模板不生效；若已设置并选择单品级运费模板，此处不选择运费模板，保存后商品将按照默认运费收取;如您新建运费模板，请点击刷新获取最新的模板信息">
            <Icon size="20" color="#ff9900" type="ios-information-circle" />
          </Poptip>
          <Button size="small" class="mr" @click="getFreightList">刷新</Button>
          <Button size="small" type="info" @click="$router.push({name: 'operation/caggiage/list'})">新建运费模版</Button>
        </FormItem>
      </Form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      freightList: [],
      freightTemplateId: null
    }
  },
  mounted () {
    this.getFreightList()
  },
  methods: {
    getFreightList () {
      return this.$jsonPost('/freight/setting/page/product').then(res => {
        this.freightList = res.map(item => {
          return {
            id: item.id,
            name: item.freightName
          }
        })
      })
    }
  }
}
</script>

<style>

</style>
